<!--
 * @Author: kkk 997610780@qq.com
 * @Date: 2025-01-09 19:10:53
 * @LastEditors: kkk 997610780@qq.com
 * @LastEditTime: 2025-03-25 22:27:54
 * @FilePath: \knowledge-uni\src\pages\index\components\filter-menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="flex justify-between items-center">
    <view class="text-base text-md font-bold">推荐课程</view>
    <view class="flex gap-x-2">
      <!-- <view class="mr-3">
        <wd-drop-menu>
          <wd-drop-menu-item v-model="state.synthesize" :options="synthesizeList" @change="handleChangeSynthesize" />
        </wd-drop-menu>
      </view> -->
      <wd-sort-button title="综合" v-model="state.createTime" :line="false" @change="handleChangeSort('createTime')" />
      <wd-sort-button title="销量" v-model="state.sale" :line="false" @change="handleChangeSort('sale')" />
      <wd-sort-button title="价格" v-model="state.price" :line="false" @change="handleChangeSort('price')" />
    </view>
  </view>
</template>
<script setup>
const synthesizeList = [
  { label: '综合', value: 0 },
  // { label: '销量', value: 1 },
  { label: '上架时间', value: 2 },
]

const emit = defineEmits(['changeSort'])

const state = ref({
  createTime: 0,// 1 升序，0 重置状态，-1 降序。
  sale: 0,
  price: 0,
});

function handleChangeSynthesize() {
  emit('changeSort', {
    key: 'synthesize',
    value: state.value.synthesize,
  })
}

function handleChangeSort(key) {
  state.value = {
    createTime: 0,// 1 升序，0 重置状态，-1 降序。
    sale: 0,
    price: 0,
    [key]: state.value[key]
  }
  emit('changeSort', {
    key,
    value: state.value[key],
  });
}
</script>
<style lang="scss" scoped></style>
